<template>
    <main class="main">
        <Header @languageDec="languageDec" @showLanguage="showLanguage"></Header>
        <el-drawer
            title="请选择语言"
            :visible.sync="languageDialog"
            direction="rtl"
            ref="drawer"
            :with-header="false"
            :show-close="false"
            size="28%"
            >
            <div class="language-choose">
                <p class="font-large">Choose Your Market & Language</p>
                <p>MARKET</p>
                <el-select v-model="language" placeholder="请选择">
                    <el-option label="中国" value="zh"></el-option>
                    <el-option label="United Kindom" value="en"></el-option>
                </el-select>
                <p>Language</p>
                <el-select v-model="language" placeholder="请选择">
                    <el-option label="中文" value="zh"></el-option>
                    <el-option label="English" value="en"></el-option>
                </el-select>
                <el-button type="primary">确 定</el-button>
            </div>
        </el-drawer>
        <div class="content">
            <slot></slot>
        </div>
        <Footer></Footer>
    </main>
</template>

<script>
import Header from './Header'
import Footer from './Footer'

export default {
    name: 'Mainer',
    components: { Header, Footer },
    data() {
        return {
            languageDialog: false,
            language: 'zh',
            languageDec: 'ZH(ZH)'
        }
    },
    methods: {
        showLanguage(visible) {
            this.languageDialog = visible;
        }
    }
}
</script>

<style scoped>
* {
    color: rgb(30, 30, 30);
    font-size: 12px;
    letter-spacing: 1px;
}
html, body, #app {
    width: 100%;
    height: 100%;
}
.content {
    min-height: calc(100vh - 248px);
    padding: 12px 36px;
}
.font-large {
    font-size: 40px;
}
.language-choose {
    width: 80%;
    margin: 30px auto;
}
.language-choose p {
    margin-top: 20px;
}
.el-select {
    width: 100%;
    margin-bottom: 10px;
}
.el-button {
    background-color: #666 !important;
    border-color: #666 !important;
    color: white !important;
    font-size: 16px !important;
    width: 120px;
    height: 38px;
    margin: 20px 0;
}
.el-button:hover {
    background-color: #acacac !important;
    border-color: #acacac !important;
}
.el-select-dropdown__item {
    font-size: 16px;
}
.el-select-dropdown__item.selected {
    color: #BD845B !important;
}
</style>